<template>
  <div class="box">
    <mt-header title="首页" fixed></mt-header>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="index">
        <mt-swipe :auto="4000" style="height: 150px">
          <mt-swipe-item><a :href="`/news/${data.result[0].nid}`">
							<img :src="`/img2/` + data.result[0].nimg" alt="" style="width:100%;height:100%"/>
						
					</a></mt-swipe-item>
          <mt-swipe-item><a :href="`/news/${data.result[1].nid}`">
							<img :src="`/img2/` + data.result[1].nimg" alt="" style="width:100%;height:100%"/>
						
					</a></mt-swipe-item>
          <mt-swipe-item><a :href="`/news/${data.result[2].nid}`">
							<img :src="`/img2/` + data.result[2].nimg" alt="" style="width:100%;height:100%"/>
						
					</a></mt-swipe-item>
        </mt-swipe>
      </mt-tab-container-item>
    </mt-tab-container>

    <div class="mid">
			<div class="news">
				
				<div class="newsright">
					<a :href="`/news/${data.result[0].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[0].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span>{{data.result[0].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[1].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[1].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[1].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[2].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[2].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[2].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[3].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[3].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[3].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[4].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[4].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span>{{data.result[4].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[5].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[5].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[5].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[6].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[6].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[6].ntitle}}</span>
						</div>
					</a>
					<a :href="`/news/${data.result[7].nid}`">
						<div class="newsimg">
							<img :src="`/img2/` + data.result[7].nimg" alt="" />
						</div>
						<div class="newstitle">
							<span class="shadow">{{data.result[7].ntitle}}</span>
						</div>
					</a>
				</div>
  </div>
  <div class="more_mob">妹有了!</div>
	</div>
	
<mt-tabbar v-model="selected" class="tabbar" fixed>
      <mt-tab-item id="index">
        <img src="../assets/img/home.png" alt="" slot="icon" /> 首页
      </mt-tab-item>
      <mt-tab-item id="fenlei">
        <img src="../assets/img/list.png" alt="" slot="icon" />商品
      </mt-tab-item>
      <mt-tab-item id="gouwuche">
        <img src="../assets/img/car.png" alt="" slot="icon" />购物车
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img src="../assets/img/user.png" alt="" slot="icon" />我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "index",
      data: null,
    }
  },
  mounted () {
    // console.log(1)
    this.getData();
  },
  methods: {
    getData() {
      let url = "/news"
      this.axios.get(url).then(res =>{
        console.log(res)
        this.data = res.data
      })
    }
  },
  watch: {
    selected(newval, oldval) {
      console.log(oldval);
      switch (newval) {
        case "fenlei":
          this.$router.push({
            path: "/fenlei",
          });
          break;
        case "gouwuche":
          this.$router.push({
            path: "/gouwuche",
          });
          break;
        case "index":
          this.$router.push({
            path: "/",
          });
          break;
           case "mine":
          this.$router.push({
            path: "/mine",
          });
          break;
      }
    }
}
};
</script>

<style lang="scss" scoped>
.tabbar {
  bottom: 0px;
  height: 8vh;
}
.box {
  padding-bottom: 10vh;
  padding-top: 7vh;
}
.mid{
		padding-right: 10px;
		padding-left: 10px;
		height: auto;
	}
	.newsleft{
		margin-top: 30px;
		width: 100%;
		height: auto;
		border-top: 7px solid #26a2ff;
		border-right: 7px solid #26a2ff;
		border-radius: 0px 10px 0px 0px;
		box-sizing: border-box;
	}
	.newsleft>a{
		padding-right: 10px;
		display: block;
	}
	.newsleft h1{
		font-size: 22px;
		margin-bottom: 10px;
	}
	.newsright{
		width: 100%;
		height: 800px;
		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	.newsright>a{
		width: 50%;
		height: 180px;
		display: block;
		margin-top: 20px;
		padding: 0px 5px;
		float: left;
		box-sizing: border-box;
	}
	// .newsright :nth-child(1),.newsright :nth-child(3),.newsright :nth-child(5),.newsright :nth-child(7){
	// 	// padding-right: 10px;
	// 	margin-right: 10px;
	// 	box-sizing: border-box;
	// }
	// .newsright :nth-child(2),.newsright :nth-child(4),.newsright :nth-child(6),.newsright :nth-child(8){
	// 	// padding-left: 10px;
	// 	box-sizing: border-box;
	// }
	.newsimg{
		width: 100%;
		height: 50%;
		overflow: hidden;
	}
	.newstitle{
		width: 100%;
		height: 50%;
		font-size: 15px;
		padding-top: 1vh;
		color: #000000;
		border-bottom: 1px solid #D3D3D3;
		border-right: 1px solid #D3D3D3;
		border-radius: 0px 0px 10px 0px;
	}
	.newstital>span{
		color: #E10600;
		display: block;
		padding-top: 10px;
		font-size: 10px;
	}
	.newsright img{
		float: left;
		width: 100%;
		padding: 0px;
	}
	
	.newstital img{
		width: 100%;
	}
	.newsleft>a>h1{
		display: none;
	}
	.more_mob{
		text-align: center;
		font-size: 20px;
		width: 150px;
		height: auto;
		background-color: #26a2ff;
		color: #F0F8FF;
		margin: auto;
		border-radius:50px ;
		margin-top: 10px;
	}
</style>
